<template>
    <div class="tixian-box">
        <el-card class="box-card" shadow="never">
            <div class="search-box" style="overflow: hidden">
                <div class="search-left">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </div>

                <div class="search-right">
                    <el-button @click="resetFun" class="reset-btn">
                        <span>重置</span>
                    </el-button>
                    <el-button type="primary" @click="getLists" class="el-button">
                        <span>查询结果</span>
                    </el-button>
                </div>
            </div>

            <el-form :model="search" ref="searchForm" label-width="100px" class="search-form" style="overflow-x: auto">
                <el-form-item label="用户id:" prop="userid">
                    <el-input v-model="search.userid" size="large" placeholder="请输入内容" @change="getLists" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="用户名称:" prop="username">
                    <el-input v-model="search.username" size="large" placeholder="请输入内容" @change="getLists" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="流水号:" prop="order_sn">
                    <el-input v-model="search.order_sn" size="large" placeholder="请输入内容" @change="getLists" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="类型:" prop="status">
                    <el-select v-model="search.status" class="m-2" placeholder="状态" size="large" @change="getLists"
                        clearable>
                        <el-option v-for="item in statuss" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="来源:" prop="type">
                    <el-select v-model="search.type" class="m-2" placeholder="状态" size="large" @change="getLists"
                        clearable>
                        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
        <el-table :data="lists" border style="width: 100%" @row-click="rowCli">
            <el-table-column prop="id" label="编号" align="center" width="80px" header-align="center"></el-table-column>

            <el-table-column prop="createtime" label="创建时间" align="center" header-align="center"> </el-table-column>

            <el-table-column prop="userid" label="用户id" align="center" header-align="center"> </el-table-column>

            <el-table-column prop="username" label="用户名称" align="center" header-align="center"> </el-table-column>

            <el-table-column prop="status" label="类型" align="center" header-align="center">
                <template #default="scope">
                    <div :style="scope.row.statusStyle">{{ scope.row.statusText }}</div>
                </template>
            </el-table-column>

            <el-table-column prop="money" label="金额" align="center" header-align="center"> </el-table-column>

            <el-table-column prop="order_sn" label="流水号" align="center" header-align="center"> </el-table-column>

            <el-table-column prop="typeText" label="来源" align="center" header-align="center"> </el-table-column>

            <el-table-column prop="beizhu" label="备注" align="center" header-align="center"> </el-table-column>

            <!-- <el-table-column label="操作" align="center" header-align="center" width="160px">
                <template #default="scope">
                    <el-button type="primary" v-if="scope.row.status == '0'" @click.stop="shenheFun(scope.row.id, 1)"
                        size="small">同意</el-button>
                    <el-button type="cancel" v-if="scope.row.status == '0'" @click.stop="shenheFun(scope.row.id, 2)"
                        size="small">拒绝</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <div style="text-align: right; margin-top: 20px; overflow: hidden">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                @prev-click="handlePrev" @next-click="handleNext" :current-page="pageNo"
                :page-sizes="[5, 10, 20, 50, 100]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination">
            </el-pagination>
        </div>
        <!-- 添加编辑文章类型 -->
    </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/user'
import { getQianbaoList } from '@api/huiyuan'

const userStore = useUserStore()

const router = useRouter()

// *********************************************列表
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(10)
const lists = ref([])

//获取列表
const statusTextArr = ref(['未处理', '已同意', '已拒绝'])
const statusStyleArr = ref(['color: var(--dangerColor)', 'color: var(--successColor)', 'color: var(--dangerColor)'])
async function getLists() {
    let { userid, username, order_sn, status, type } = search.value
    let searchOpt = {
        pageNo: pageNo.value,
        pageSize: pageSize.value
    }

    if (userid) {
        searchOpt.userid = userid
    }

    if (username) {
        searchOpt.username = username
    }

    if (order_sn) {
        searchOpt.order_sn = order_sn
    }

    if (status) {
        searchOpt.status = status
    }

    if (type) {
        searchOpt.type = type
    }

    let res = await getQianbaoList(searchOpt)

    if (res.code == 200) {
        const statusArr = ['收入', '支出']
        const statusStyleArr = [
            'color: var(--successColor)',
            'color: var(--dangerColor)'
        ]
        const typeArr = ['订单收入', '分享收入', '提现支出']
        lists.value = res.data.map((v) => {
            return {
                ...v,
                statusText: statusArr[parseInt(v.status)],
                statusStyle: statusStyleArr[parseInt(v.status)],
                typeText: typeArr[parseInt(v.type)]
            }
        })
        total.value = parseInt(res.msg)
    }
}

// 搜索
const search = ref({
    userid: '',
    username: '',
    order_sn: '',
    status: '',
    type: ''
})

const statuss = ref([
    {
        label: '收入',
        value: '0'
    },
    {
        label: '支出',
        value: '1'
    }
])

const types = ref([
    {
        label: '订单收入',
        value: '0'
    },
    {
        label: '分享收入',
        value: '1'
    },
    {
        label: '提现支出',
        value: '2'
    }
])
const resetFun = () => {
    search.value = {
        userid: '',
        username: '',
        order_sn: '',
        status: '',
        type: ''
    }
    getLists()
}

//pageSize改变
function handleSizeChange(val) {
    pageSize.value = val
    getLists()
}

//pageNo改变
function handleCurrentChange(val) {
    pageNo.value = val
    getLists()
    // this.$store.dispatch('setpageNo', val);
}

//上一页
function handlePrev(val) {
    pageNo.value = val
    getLists()
}

//下一页
function handleNext(val) {
    pageNo.value = val
    getLists()
}

//查看详情
const rowCli = (row, column) => {
    // router.push({ path: '/home/orderDetail', query: { order_sn: row.order_sn } })
}

onMounted(() => {
    getLists()
})
</script>
<style lang="scss" scoped>
.order-box {
    .left-right-box {
        position: absolute;
        top: 172px;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;

        .left-box {
            height: 100%;
            width: 230px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-top: 50px;
            box-sizing: border-box;
            border: 1px solid #ebeef5;
            position: relative;
            overflow-y: auto;
            border-radius: 4px;
            margin-right: 20px;

            .title {
                font-size: 14px;
                padding: 8px 17px;
                color: #636363;
                height: 32px;
                line-height: 32px;
                font-weight: 600;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                background: #fff;
                z-index: 999;

                .icon {
                    float: right;
                    font-size: 24px;
                    font-weight: 400;
                    cursor: pointer;
                }
            }

            .left-lists {
                font-size: 12px;
                padding: 8px 17px;
                color: #636363;
                height: 32px;
                line-height: 32px;
                cursor: pointer;
                position: relative;

                .name {
                    float: left;
                }

                .input-name {
                    width: 90px;
                    float: left;
                    padding: 0;

                    .el-input__inner {
                        padding: 0 10px;
                    }
                }

                .option {
                    float: right;
                }
            }
        }

        .left-lists.active {
            color: #4c9ff2 !important;
            background-color: #f5f5f5;
        }

        .right-box {
            flex: 1;
            overflow-y: auto;
        }
    }
}
</style>
<style lang="scss">
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>
  